<template>
  <div>
    <!-- 头部 -->
    <eleheader title="搜索">
      <!-- 插槽左 -->
      <span slot="left" class="header_left">
        <!-- 图标 -->
        <van-icon name="arrow-left" @click.native="$router.back()" />
      </span>
      <!-- 插槽右 -->
      <span slot="right" class="header_right">
        <!-- 图标/或者登录注册 -->
      </span>
    </eleheader>
    <!-- 内容 -->
    <div class="search">
      <van-field
        v-model.trim="userkey"
        clearable
        placeholder="请输入商家或美食名称"
        @keyup.enter="submitFn"
      />
      <!-- 提交按钮 -->
      <button class="btn" @click="submitFn">提交</button>
    </div>

    <!-- 1. 商家 -->
    <div class="Business" v-if="show">
      <!-- 标题 -->
      <h4 class="title">商家</h4>
      <!-- 内容 -->
      <div
        class="info"
        v-for="item in newList"
        :key="item.id"
        @click="topage(item.id)"
      >
        <div class="left">
          <img :src="baseURL + '/img/' + item.image_path" />
        </div>
        <div class="right">
          <p>
            {{ item.name }}
            <!-- 图标 -->
            <svg
              data-v-3726cde6=""
              xmlns="http://www.w3.org/2000/svg"
              version="1.1"
              width="24"
              height="14"
              class="pay_icon"
            >
              <polygon
                data-v-3726cde6=""
                points="0,14 4,0 24,0 20,14"
                style="fill: none; stroke: rgb(255, 96, 0); stroke-width: 1"
              ></polygon>
              <line
                data-v-3726cde6=""
                x1="1.5"
                y1="12"
                x2="20"
                y2="12"
                style="stroke: rgb(255, 96, 0); stroke-width: 1.5"
              ></line>
              <text
                data-v-3726cde6=""
                x="3.5"
                y="9"
                style="fill: rgb(255, 96, 0); font-size: 9px; font-weight: bold"
              >
                支付
              </text>
            </svg>
          </p>
          <p>月售{{ item.recent_order_num }}单</p>
          <p class="last">
            {{ item.float_minimum_order_amount }}元起送/距离{{ item.distance }}
          </p>
        </div>
      </div>
    </div>
    <!-- 2. 搜索历史 -->
    <div class="content" v-if="bool">
      <!-- 标题 -->
      <h4 class="history">搜索历史</h4>
      <!-- 内容渲染 -->
      <ul>
        <li
          v-for="(item, index) in historyLIst"
          :key="index"
          @click="addFn(item)"
        >
          {{ item }} <van-icon name="cross" @click.stop="delFn(index)" />
        </li>
      </ul>
      <!-- 清空搜索历史 -->
      <button @click="removeFn">清空搜索历史</button>
    </div>
    <!-- 3 没有搜索结果 -->
    <div class="search_none" v-if="datashow">很抱歉!无搜索结果</div>
  </div>
</template>

<script>
import eleheader from "@/components/eleheader";
import axios from "../utils/request";
// 引入接口
import { searchCafe } from "../api/search";
export default {
  components: { eleheader },
  name: "search",
  data() {
    return {
      baseURL: axios.defaults.baseURL.split(":")[1], // 默认路径
      userkey: "", // 用户输入关键字
      bool: false, //历史记录显示与隐藏
      show: false, // 搜索结果显示与隐藏
      datashow: false, //暂无结果显示与隐藏
      historyLIst: JSON.parse(localStorage.getItem("history")) || [], // 搜索历史
      latitude: 31.38098,
      longitude: 121.50146,
      newList: [], // 用户搜索结果数据
    };
  },
  created() {
    // 渲染历史记录
    let value = JSON.parse(localStorage.getItem("history")) || [];
    if (value.length == 0) {
      this.bool = false;
    } else {
      this.bool = true;
    }
  },
  // 侦听事件
  watch: {
    historyLIst: {
      deep: true,
      handler(val) {
        if (val.length == 0) {
          // 历史记录隐藏
          this.bool = false;
        }
      },
    },
    // 侦听用户输入框
    userkey: {
      handler(val) {
        if (val) {
          // 历史记录隐藏
          this.bool = false;
        } else {
          // 历史记录显示
          this.bool = true;
          // 暂无结果隐藏
          this.datashow = false;
          // 搜索结果隐藏
          this.show = false;
        }
      },
    },
  },

  methods: {
    // 1. 点击提交事件
    submitFn() {
      console.log(this.baseURL);
      if (!this.userkey) {
        this.$toast({
          message: "关键字不能为空",
          icon: "like-o",
        });
        return;
      }
      // 关键字保存本地
      this.historyLIst.push(this.userkey);
      // 数组去重
      const set = new Set(this.historyLIst);
      //对象转数组
      this.historyLIst = [...set];
      // 保存到本地
      localStorage.setItem("history", JSON.stringify(this.historyLIst));
      // 调用请求
      this.getData();
    },

    // 2. 删除历史
    delFn(index) {
      // 先获取本地数据
      this.historyLIst = JSON.parse(localStorage.getItem("history"));
      // 删除
      this.historyLIst.splice(index, 1);
      // 替换本地数据
      localStorage.setItem("history", JSON.stringify(this.historyLIst));
      1;
    },
    //3. 清空历史记录
    removeFn() {
      localStorage.removeItem("history");
      // 历史记录隐藏
      this.bool = false;
    },

    //4. 点击历史记录进行搜索
    addFn(item) {
      // console.log(item);
      this.userkey = item;
      this.getData();
    },
    // 5. 点击跳转详情页面
    topage(id) {
      console.log(id);
    },

    //6. 封装请求函数
    getData() {
      // 发起请求
      let geohash = this.latitude + "," + this.longitude;
      searchCafe({ keyword: this.userkey, geohash: geohash }).then((res) => {
        console.log(res.data);
        // 如果没有数据
        if (res.data == "") {
          // 显示暂无数据
          this.datashow = true;
        } else {
          // 赋值用户搜索结果数据
          this.newList = res.data;
          // 搜索结果显示
          this.show = true;
        }
      });
    },
  },
};
</script>

<style lang="less" >
* {
  margin: 0;
  padding: 0;
  border: none;
}
.header_left,
.header_right {
  padding: 0 19.9992px;
  flex: 1;
}
.header_left {
  .van-icon {
    float: left;
    line-height: 45px;
  }
}
.header_right {
  .van-icon {
    float: right;
    line-height: 45px;
  }
}

// 页面

.search {
  margin: 15px;
  display: flex;

  .van-field {
    flex: 6;
    // 清除组件默认内外边距
    margin: 0;
    padding: 0;
    padding-left: 4.9992px;
    height: 42px;
    line-height: 40.0008px;
    font-size: 18px;
    background-color: #f2f2f2;
    border: 1.0008px solid #ccc;
    border-radius: 4.9992px;
  }
  .btn {
    flex: 1;
    height: 42px;
    margin-left: 4.9992px;
    font-size: 16.0008px;
    border: 1.9992px solid #3190e8;
    background-color: #3190e8;
    border-radius: 4.9992px;
  }
}

// 搜索历史内容
.content {
  width: 100%;
  .history {
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0 15px;
    background-color: #f5f5f5;
  }
  ul {
    border-bottom: 1px solid #ccc;
  }
  li {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    .van-icon {
      position: absolute;
      top: 10px;
      right: 6px;
      font-size: 20px;
      color: #6cf;
    }
  }
  button {
    width: 100%;
    height: 40px;
    font-weight: 700;
    background-color: #fff;
    color: #3190e8;
  }
}
// 商家内容
.Business {
  width: 100%;
  h4 {
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0 15px;
    background-color: #f5f5f5;
  }
  .info {
    height: 110px;
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    .left {
      img {
        width: 45px;
      }
    }
    .right {
      flex: 1;
      margin-left: 8px;

      p {
        font-size: 18px;
        line-height: 28px;
      }
      .last {
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
      }
    }
  }
}
// 无搜索结果
.search_none {
  text-align: center;
}
</style>